<template>
  <div class="close">
    <button @click="$emit('close')">关闭</button>
  </div>

  <div class="survey-container">
    <!-- 一个 section 就是一个问题 q.id 是问题id -->
    <section class="question-item" v-for="q in questionsData" :key="q.id">
      <!--  -->

      <div v-if="q.type == DESCRIPTION" class="question-type__description">
        <p>{{ q.title }}</p>
      </div>

      <div v-if="q.type == TEXT" class="question-type__text">
        <p>{{ q.title }}</p>
        <input type="text" v-model="newAnswer[q.id]" />
      </div>

      <div v-if="q.type == TEXTAREA" class="question-type__textarea">
        <p>{{ q.title }}</p>
        <textarea cols="30" rows="10" v-model="newAnswer[q.id]"></textarea>
      </div>

      <div v-if="q.type == SINGLE" class="question-type__single">
        <p>{{ q.title }}</p>
        <label
          v-for="option in q.options"
          :key="option.id"
          class="checkbox-option"
          @click="newAnswer[q.id] = option.id"
        >
          <input
            type="radio"
            :name="q.id"
            :checked="newAnswer[q.id] == option.id"
          />
          <p class="option-text">{{ option.text }}</p>
        </label>
      </div>

      <div v-if="q.type == SELECT" class="question-type__select">
        <p>{{ q.title }}</p>
        <label
          v-for="option in q.options"
          :key="option.id"
          class="checkbox-option"
          @click="newAnswer[q.id] = option.id"
        >
          <input
            type="radio"
            :name="q.id"
            :checked="newAnswer[q.id] == option.id"
          />
          <p class="option-text">{{ option.text }}</p>
        </label>
      </div>

      <div v-if="q.type == MULTI" class="question-type__multi">
        <p>{{ q.title }}</p>
        <label
          v-for="option in q.options"
          :key="option.id"
          class="checkbox-option"
        >
          <input
            type="checkbox"
            :checked="newAnswer[q.id][option.id]"
            @change="newAnswer[q.id][option.id] = !newAnswer[q.id][option.id]"
          />
          <p class="option-text">{{ option.text }}</p>
        </label>
      </div>

      <div v-if="q.type == MATRIX_RADIO" class="question-type__matrix_radio">
        <p>{{ q.title }}</p>
        <div class="question-body">
          <div v-for="st in q.subTitles" :key="st.id" class="question-item">
            <p>{{ st.text }}</p>
            <label
              v-for="option in q.options"
              :key="option.id"
              class="checkbox-option"
              @click="newAnswer[q.id][st.id] = option.id"
            >
              <input
                type="radio"
                :name="st.id"
                :checked="newAnswer[q.id][st.id] == option.id"
              />
              <p class="option-text">{{ option.text }}</p>
            </label>
          </div>
        </div>
      </div>

      <!--  -->
    </section>
  </div>

  <div class="submit">
    <button @click="submit" :class="{loading: submitting}">
      {{submitting? '正在提交' : '提交'}}
    </button>
  </div>
</template>

<script>
import LoadingSvg from '@/components/LoadingSvg.vue'
import editOneAnswer from '@/request/editOneAnswer'
import {
  QUESTION_TYPE_DESCRIPTION,
  QUESTION_TYPE_SINGLE,
  QUESTION_TYPE_MULTI,
  QUESTION_TYPE_SELECT,
  QUESTION_TYPE_TEXT,
  QUESTION_TYPE_TEXTAREA,
  QUESTION_TYPE_MATRIX_RADIO,
} from '@/constants/default.js'

export default {
  emits: ['close', 'update'],
  components: { LoadingSvg },
  props: {
    answerTime: String,
    surveyId: String,
    answerId: String,
    questionsData: Object,
    oldAnswer: Object,
  },
  data() {
    return {
      submitting: false,
      newAnswer: JSON.parse(JSON.stringify(this.oldAnswer)),
      DESCRIPTION: QUESTION_TYPE_DESCRIPTION,
      SINGLE: QUESTION_TYPE_SINGLE,
      MULTI: QUESTION_TYPE_MULTI,
      SELECT: QUESTION_TYPE_SELECT,
      TEXT: QUESTION_TYPE_TEXT,
      TEXTAREA: QUESTION_TYPE_TEXTAREA,
      MATRIX_RADIO: QUESTION_TYPE_MATRIX_RADIO,
    }
  },
  methods: {
    formatNewAnswer() {
      /*
      要将  answer 格式化成这种格式
      [
        {
          id, type, // 这两项是必须的, 问题id 和问题类型
          text, // 单行/多行文本
          options: [{id,text}], // 单选/多选/下拉
          groups: // 矩阵
          [
            {
              id,
              options: [{id,text}]
            }
          ]
        }
      ]
      */
      const newAnswer = this.newAnswer
      const answer = []
      this.questionsData.forEach(q => {
        if (q.type === this.DESCRIPTION) return
        const an = { id: q.id, type: q.type }
        if (q.type === this.TEXT || q.type === this.TEXTAREA) {
          an.text = newAnswer[q.id]
        } else if (q.type === this.SELECT || q.type === this.SINGLE) {
          an.options = [{
            id: newAnswer[q.id],
            text: ''
          }]
          q.options.some(o => {
            if (o.id == newAnswer[q.id]) {
              an.options[0].text = o.text
              return true
            }
          })
        } else if (q.type === this.MULTI) {
          an.options = []
          q.options.some(o => {
            if (newAnswer[q.id][o.id]) {
              an.options.push({
                id: o.id,
                text: o.text,
              })
            }
          })
        } else if (q.type === this.MATRIX_RADIO) {
          an.groups = []
          const id2option = {}
          q.options.some(o => { id2option[o.id] = o.text })
          q.subTitles.forEach(st => {
            an.groups.push({
              id: st.id,
              options: [{
                id: newAnswer[q.id][st.id],
                text: id2option[newAnswer[q.id][st.id]]
              }]
            })
          })
        }

        answer.push(an)
      })

      return {
        survey_id: this.surveyId,
        id: this.answerId,
        collect_time: this.answerTime,
        answer
      }
    },

    async submit() {
      if (this.submitting) return
      this.submitting = true
      const newAnswer = this.formatNewAnswer()
      await editOneAnswer(newAnswer)
      this.submitting = false
      this.$emit('close')
      this.$emit('update')
    }
  }
}
</script>

<style lang="scss" src="./index.scss" scoped />
